<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/fontawesome-free-5.7.2-web/css/all.css">
    <link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="../css/jquery.mobile.ui.css">
    <link rel="stylesheet" href="../css/jqm-ui-demos.css">
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery.mobile-1.4.5.js"></script>
    <script type="text/javascript" src="../js/jquery.mobile.ui.js"></script>
  </head>
  <body>

    <div data-role="page" data-theme="a">
      <div data-role="header" data-position="fixed" data-tap-toggle="false" class="navbar">
        <div class="nav">
          <a data-ajax="false" href="../menus.html" class="nav-link"><i class="fas fa-chevron-left"></i> 首页</a>
          <h3 class="nav-title">Form</h3>
        </div>
      </div>
      <div role="main" class="ui-content">

        <div class="demo">
          <h5>一个丰富的表单</h5>
          <ul data-role="listview" class="form-list">
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title label">中文姓名</div>
                  <div class="item-input">
                    <input data-role="none" type="text" placeholder="与证件保持一致">
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title label">手机号码</div>
                  <div class="item-input">
                    <input data-role="none" type="text" placeholder="填写手机号码(选填)">
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title label">英文姓</div>
                  <div class="item-input">
                    <input data-role="none" type="text" placeholder="姓(如'ZHANG')">
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title label">英文名</div>
                  <div class="item-input">
                    <input data-role="none" type="text" placeholder="名(如'SAN')">
                  </div>
                </div>
              </div>
            </li>
            <li>
              <a href="javascript:;" class="popup-select-trigger">
                <div class="item-content">
                  <div class="item-inner">
                    <div class="item-title label">国籍</div>
                    <div class="item-input">
                      <select data-role="none" id="select1" class="popup-select">
                        <option value>请选择国籍</option>
                        <option value="0">中国</option>
                        <option value="1">美国</option>
                        <option value="2">德国</option>
                        <option value="3">英国</option>
                        <option value="4">日本</option>
                      </select>
                    </div>
                  </div>
                </div>
              </a>
            </li>
            <li>
              <a href="javascript:;" class="popup-select-trigger">
                <div class="item-content">
                  <div class="item-inner">
                    <div class="item-title label">爱好</div>
                    <div class="item-input">
                      <select data-role="none" class="popup-select">
                        <option value>请选择</option>
                        <option value="0">打篮球</option>
                        <option value="1">写字</option>
                        <option value="2">编程</option>
                        <option value="3">游泳</option>
                        <option value="4">画画</option>
                      </select>
                    </div>
                  </div>
                </div>
              </a>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title label">描述</div>
                  <div class="item-input">
                    <textarea data-role="none" placeholder="对自己的一些简要的描述，如喜欢编程、看书"></textarea>
                  </div>
                </div>
              </div>
            </li>
          </ul>

        </div>

        <div class="ui-grid-a">
          <div class="ui-block-a">
            <button type="button" class="ui-btn ui-btn-sm ui-btn-warning">取消</button>
          </div>
          <div class="ui-block-b">
            <button type="button" class="ui-btn ui-btn-sm ui-btn-success">提交</button>
          </div>
        </div>

      </div>
    </div>
  </body>
</html>